<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Project</title>
</head>
<body>
<div>
    <h1>项目创建</h1>
    <form action="/project/_create" method="post">
        <p>
            <span>项目名称</span><input type="text" name="name">
        </p>
        <p>
            <span>contextPath</span><input type="text" name="contextPath">
        </p>
        <p>
            <span>note</span><input type="text" name="note">
        </p>
        <p>
            <button>创建</button>
        </p>
    </form>
</div>
<div>
    <h1>上传文件</h1>
    <form action="/project-page/_upload" method="post" enctype="multipart/form-data">
        <p>
            <input type="text" name="projectId">
        </p>
        <p>
            <input type="file" name="zipFile">
        </p>
        <p>
            <button>上传</button>
        </p>
    </form>
</div>
<div>
    <h1>所有项目</h1>
    <p>
        <button id="btn-load-project">加载所有项目</button>
    </p>
    <ul id="project-list">

    </ul>
</div>
<script src="lib/jquery/jquery-1.9.0.min.js"></script>
<script>

    function fillProjectList(dom, list) {
        for (var i in list) {
            var project = list[i];
            console.log(project);
            var li = '<li data-id="' + project.id + '">' + project.name + '<button class="btn-unzip">解压</button></li>';
            dom.append(li);
        }
    }

    function doUnzip() {
        var projectId = $(this).parent().attr('data-id');
        $.post('/project/' + projectId + '/_unzip', {}, function (res) {
            if (res.code === 0) {
                alert(res.msg);
            } else {
                alert(res.msg);
            }
        }, 'json');
    }

    $(function () {
        var projectListDom = $('#project-list');
        $('#btn-load-project').click(function () {
            $.get('/project/list', function (res) {
                if (res.code === 0) {
                    projectListDom.empty();
                    fillProjectList(projectListDom, res.data);
                } else {
                    alert(res.msg);
                }
                $('.btn-unzip').click(doUnzip);
            }, 'json');
        });
    });
</script>
</body>
</html>